<template>
  <view class="container">
    <Loading :show="isLoading" />
    
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="order-header">
        <text class="order-title">订单支付</text>
        <text v-if="showCountdown" class="order-countdown">支付剩余时间：{{ formatCountdown }}</text>
      </view>
      
      <view class="order-status">
        <text class="status-text" :style="{ color: orderStatus.color }">{{ orderStatus.text }}</text>
      </view>
      
      <view class="order-no">
        <text class="label">订单号：</text>
        <text class="value">{{ orderDetail?.orderNo }}</text>
      </view>

      <!-- 优惠券信息 -->
      <view v-if="orderDetail?.orderCoupon" class="order-coupon">
        <text class="label">优惠券：</text>
        <text class="value">{{ orderDetail.orderCoupon.couponName }}（-¥{{ orderDetail.orderCoupon.discountAmount }}）</text>
      </view>

      <!-- 金额信息优化 -->
      <view class="order-amount-group">
        <view class="amount-row">
          <text class="label">商品总额</text>
          <text class="value">¥{{ orderDetail?.totalAmount?.toFixed(2) }}</text>
        </view>
        <view class="amount-row" v-if="orderDetail?.discountAmount">
          <text class="label">优惠金额</text>
          <text class="value" style="color: #ff4d4f;">-¥{{ orderDetail.discountAmount?.toFixed(2) }}</text>
        </view>
        <view class="amount-row">
          <text class="label">实付金额</text>
          <text class="amount">¥{{ payTotal.toFixed(2) }}</text>
        </view>
      </view>
    
      <!-- 商品信息 -->
      <view class="order-items" v-if="orderDetail?.orderDetail?.length">
      <view class="section-title">商品信息</view>
      <view class="item-list">
        <view v-for="item in orderDetail.orderDetail" :key="item.productId + '-' + item.channelNo" class="item">
          <image class="item-image" :src="item.productImage" mode="aspectFill" />
          <view class="item-info">
            <text class="item-name">{{ item.productName }}</text>
            <view style="display: flex; align-items: center; gap: 12px;">
              <text class="item-price">单价：¥{{ item.price }}</text>
              <text class="item-quantity">x{{ item.quantity }}</text>
              <text class="item-subtotal">小计：¥{{ (item.price * item.quantity).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 支付方式选择 -->
    <view v-if="showPayButton" class="payment-section">
      <view class="section-title">选择支付方式</view>
      <view class="payment-methods">
        <view 
          v-for="method in paymentMethods" 
          :key="method.id"
          class="payment-method-item"
          :class="{ active: selectedPaymentMethod === method.id }"
          @click="selectPaymentMethod(method.id)"
        >
          <view class="payment-icon">
            <image :src="method.icon" mode="aspectFit" style="width: 32px; height: 32px;" />
          </view>
          <view class="payment-info">
            <text class="payment-name">{{ method.name }}</text>
            <text v-if="method.id === 'balance'" class="balance-text">余额：¥{{ Number(userBalance || 0).toFixed(2) }}</text>
          </view>
          <text class="method-check" v-if="selectedPaymentMethod === method.id">✓</text>
        </view>
      </view>
    </view>

    <!-- 支付宝二维码支付弹窗 -->
    <view v-if="showAlipayQrCode" class="qr-code-modal">
      <view class="qr-code-content">
        <view class="qr-code-header">
          <text class="title">支付宝支付</text>
          <text class="close" @click="closeQrCode">×</text>
        </view>
        <view class="qr-code-body">
          <image class="qr-code" :src="alipayQrCode" mode="aspectFit" />
          <text class="amount">¥{{ payTotal.toFixed(2) }}</text>
          <text class="tip">请使用支付宝扫码支付</text>
          <button class="save-qr-btn" @click="saveQrCode">保存二维码到相册</button>
        </view>
        <view class="qr-code-footer">
          <button class="check-payment-btn" @click="checkPaymentStatus">已完成支付</button>
        </view>
      </view>
    </view>

    <!-- 底部支付按钮 -->
    <view v-if="showPayButton" class="bottom-bar">
      <view class="total-amount">
        <text>实付金额：</text>
        <text class="price">¥{{ payTotal }}</text>
      </view>
      <button 
        class="pay-btn" 
        :loading="isLoading"
        @click="handlePayment"
      >
        立即支付
      </button>
    </view>
  </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import Loading from '@/components/Loading.vue';
import { getByOrderNo } from '@/api/order';
import { getUserAccount } from '@/api/user';
import { createAliPay, queryAliPayStatus, createWxPay, queryWxPayStatus, createBalancePay } from '@/api/payment';
import type { PayMethod } from '@/api/payment/types';

// 响应式数据
const isLoading = ref(false);
const orderNo = ref('');
const payTotal = ref(0);
const orderDetail = ref<any>(null);
const countdown = ref(0); // 初始化为0
const showPaymentMethods = ref(false);
const selectedPaymentMethod = ref('');
const userBalance = ref(0);
const userInfo = ref<any>(null);

// 支付方式
const paymentMethods = [
  { 
    id: 'alipay', 
    name: '支付宝支付', 
    icon: '/static/icons/alipay.svg'
  },
  { 
    id: 'wechat', 
    name: '微信支付', 
    icon: '/static/icons/wechat.svg'
  },
  { 
    id: 'balance', 
    name: '余额支付', 
    icon: '/static/icons/balance.svg'
  }
];

// 订单状态映射
const orderStatusMap = {
  0: { text: '待支付', color: '#ff6b00' },
  1: { text: '支付中', color: '#ff6b00' },
  2: { text: '支付成功', color: '#07c160' },
  3: { text: '支付失败', color: '#ff4d4f' },
  4: { text: '已取消', color: '#999999' },
  5: { text: '已完成', color: '#07c160' }
};

// 计算订单状态信息
const orderStatus = computed(() => {
  if (!orderDetail.value) return { text: '未知状态', color: '#999999' };
  return orderStatusMap[orderDetail.value.status] || { text: '未知状态', color: '#999999' };
});

// 计算是否显示支付按钮
const showPayButton = computed(() => {
  return orderDetail.value?.status === 0;
});

// 计算是否显示倒计时
const showCountdown = computed(() => {
  return orderDetail.value?.status === 0;
});

// 格式化倒计时
const formatCountdown = computed(() => {
  const minutes = Math.floor(countdown.value / 60);
  const seconds = countdown.value % 60;
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
});

// 计算剩余时间
const calculateRemainingTime = (createTime: string) => {
  const createDate = new Date(createTime);
  const now = new Date();
  const diffSeconds = Math.floor((now.getTime() - createDate.getTime()) / 1000);
  const remainingSeconds = 900 - diffSeconds; // 15分钟 = 900秒
  return Math.max(0, remainingSeconds);
};

// 开始倒计时
const startCountdown = () => {
  if (!orderDetail.value?.createTime) return;
  
  // 初始化倒计时
  countdown.value = calculateRemainingTime(orderDetail.value.createTime);
  
  const timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      // 订单超时处理
      handleOrderTimeout();
  }
  }, 1000);
};

// 处理订单超时
const handleOrderTimeout = async () => {
  try {
    // 再次获取订单数据，让后端处理超时状态
    const response = await getByOrderNo(orderNo.value);
    if (response.code === 200) {
      const data = response.data;
      // 更新订单数据
      orderDetail.value = data;
      if(data.status == 0 || data.status == 1 || data.status == 3){
          uni.showModal({
          title: '订单已超时',
          content: '您的订单已超时，请重新下单',
          showCancel: false,
          success: () => {
            uni.navigateBack();
          }
        });
      }
    }
  } catch (error) {
    console.error('获取超时订单数据失败:', error);
    // 即使获取失败也显示超时提示
    uni.showModal({
      title: '订单'+orderNo.value+'已超时',
      content: '您的订单已超时，请重新下单',
      showCancel: false,
      success: () => {
        uni.navigateBack();
      }
    });
  }
};

// 选择支付方式
const selectPaymentMethod = (method: string) => {
  selectedPaymentMethod.value = method;
  
  // 如果选择余额支付，立即检查余额是否足够
  if (method === 'balance') {
    if (userBalance.value < payTotal.value) {
      uni.showModal({
        title: '余额不足',
        content: `当前余额：¥${userBalance.value.toFixed(2)}，支付金额：¥${payTotal.value.toFixed(2)}`,
        showCancel: false,
        success: () => {
          // 余额不足时取消选择
          selectedPaymentMethod.value = '';
        }
      });
    }
  }
};

// 获取用户余额
const fetchUserBalance = async () => {
  try {
    // 从本地存储获取用户信息
    const userInfoStr = uni.getStorageSync('userInfo');
    console.log('userInfoStr:', userInfoStr);
    
    if (!userInfoStr) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      return;
    }
    
    // 检查 userInfoStr 是否已经是对象
    if (typeof userInfoStr === 'object') {
      userInfo.value = userInfoStr;
    } else {
      try {
        userInfo.value = JSON.parse(userInfoStr);
      } catch (e) {
        console.error('解析用户信息失败:', e);
        uni.showToast({
          title: '用户信息格式错误',
          icon: 'none'
        });
        return;
      }
    }
    
    console.log('解析后的用户信息:', userInfo.value);
    
    if (!userInfo.value?.id) {
      uni.showToast({
        title: '用户信息不完整',
        icon: 'none'
      });
      return;
    }
    
    const response = await getUserAccount(userInfo.value.id);
    console.log('获取余额响应:', response);
    
    if (response.code === 200) {
      // 确保余额是数字类型
      userBalance.value = Number(response.data.balance || 0);
      console.log('当前余额:', userBalance.value);
    }
  } catch (error) {
    console.error('获取用户余额失败:', error);
    uni.showToast({
      title: '获取余额失败',
      icon: 'none'
    });
  }
};

// 支付宝二维码相关
const showAlipayQrCode = ref(false);
const alipayQrCode = ref('');

// 显示支付宝二维码
const showAlipayQrCodeModal = (qrCodeData: string) => {
  alipayQrCode.value = qrCodeData;
  showAlipayQrCode.value = true;
};

// 关闭二维码弹窗
const closeQrCode = async () => {
  // 关闭前先查询一次支付状态
  await checkPaymentStatus();
  showAlipayQrCode.value = false;
  alipayQrCode.value = '';
};

// 添加保存二维码到相册功能
const saveQrCode = () => {
  if (!alipayQrCode.value) {
    uni.showToast({ title: '二维码未生成', icon: 'none' });
    return;
  }
  
  const qrCodeData = alipayQrCode.value;
  
  // 检查相册权限
  uni.getSetting({
    success: (res) => {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        // 没有权限，申请权限
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success: () => {
            saveBase64ToAlbum();
          },
          fail: () => {
            uni.showModal({
              title: '提示',
              content: '需要相册权限才能保存二维码，请在设置中开启',
              showCancel: false,
              confirmText: '知道了'
            });
          }
        });
      } else {
        // 有权限，直接保存
        saveBase64ToAlbum();
      }
    }
  });
};

// 保存Base64图片到相册
const saveBase64ToAlbum = () => {
  uni.showLoading({ title: '保存中...' });
  
  const qrCodeData = alipayQrCode.value;
  console.log('开始保存Base64图片');
  
  // 将Base64数据写入临时文件
  const base64Data = qrCodeData.replace(/^data:image\/\w+;base64,/, '');
  const arrayBuffer = uni.base64ToArrayBuffer(base64Data);
  
  // 生成临时文件路径
  const tempFilePath = `${uni.env.USER_DATA_PATH}/qrcode_${Date.now()}.png`;
  
  // 写入文件
  uni.getFileSystemManager().writeFile({
    filePath: tempFilePath,
    data: arrayBuffer,
    encoding: 'binary',
    success: () => {
      console.log('临时文件写入成功:', tempFilePath);
      
      // 保存到相册
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          uni.hideLoading();
          uni.showToast({ 
            title: '二维码已保存到相册', 
            icon: 'success',
            duration: 2000
          });
          
          // 清理临时文件
          uni.getFileSystemManager().unlink({
            filePath: tempFilePath,
            success: () => console.log('临时文件清理成功'),
            fail: (err) => console.log('临时文件清理失败:', err)
          });
        },
        fail: (err) => {
          uni.hideLoading();
          console.error('保存到相册失败:', err);
          uni.showToast({ 
            title: '保存失败，请重试', 
            icon: 'none' 
          });
        }
      });
    },
    fail: (err) => {
      uni.hideLoading();
      console.error('写入临时文件失败:', err);
      uni.showToast({ 
        title: '保存失败，请重试', 
        icon: 'none' 
      });
    }
  });
};

// 检查支付状态
const checkPaymentStatus = async () => {
  try {
    const response = await queryAliPayStatus(orderNo.value,"消费");
    console.log('支付状态查询结果：', response);
    
    if (response.code === 200) {
      const status = response.data;
      if (status === 'PAID') {
        // 支付成功
        showAlipayQrCode.value = false;
        handlePaymentSuccess();
      } else if (status === 'CLOSED') {
        // 订单已关闭
        showAlipayQrCode.value = false;
        handlePaymentFail(new Error('订单已关闭'));
      } else {
        // 支付未完成
        uni.showToast({
          title: '支付未完成',
          icon: 'none'
        });
      }
    }
  } catch (error) {
    console.error('查询支付状态失败：', error);
    uni.showToast({
      title: '查询支付状态失败',
      icon: 'none'
    });
  }
};

// 修改支付处理函数
const handlePayment = async () => {
  isLoading.value = true;
  if (!selectedPaymentMethod.value) {
    uni.showToast({
      title: '请选择支付方式',
      icon: 'none'
    });
    isLoading.value = false;
    return;
  }

  if (!orderNo.value) {
    uni.showToast({
      title: '订单号不能为空',
      icon: 'none'
    });
    isLoading.value = false;
    return;
  }

  if (!userInfo.value?.id) {
    uni.showToast({
      title: '用户信息不完整',
      icon: 'none'
    });
    isLoading.value = false;
    return;
  }

  try {
    isLoading.value = true;
    
    // 如果是余额支付，再次检查余额是否足够
    if (selectedPaymentMethod.value === 'balance') {
      // 重新获取一次余额，确保数据最新
      await fetchUserBalance();
      
      if (userBalance.value < payTotal.value) {
        uni.showModal({
          title: '余额不足',
          content: `当前余额：¥${userBalance.value.toFixed(2)}，支付金额：¥${payTotal.value.toFixed(2)}`,
          showCancel: false
        });
        return;
      }
    }
    
    
    let response;
    
    if (selectedPaymentMethod.value === 'wechat') {
      // 微信支付参数
      const wxPaymentParams = {
        orderNo: orderNo.value,
        userId: userInfo.value.id,
        orderId: orderDetail.value?.id,
        paymentType: 1, // 1:微信支付
        paymentAmount: payTotal.value,
        type: '消费'
      };
      response = await createWxPay(wxPaymentParams);
    } else if (selectedPaymentMethod.value === 'alipay') {
      // 支付宝支付参数
      const aliPaymentParams = {
        orderNo: orderNo.value,
        payMethod: 'alipay',
        amount: payTotal.value,
        userId: userInfo.value.id,
        orderId: orderDetail.value?.id,
        type: '消费'
      };
      response = await createAliPay(aliPaymentParams);
    } else if (selectedPaymentMethod.value === 'balance') {
      // 生成支付单号
      const payNo = `PAY${Date.now()}${Math.floor(Math.random() * 1000)}`;
      
      // 余额支付参数
      const balancePaymentParams = {
        orderNo: orderNo.value,
        userId: userInfo.value.id,
        orderId: orderDetail.value?.id,
        paymentType: 2, // 2:余额支付
        paymentAmount: payTotal.value,
        payNo: payNo, // 添加支付单号
        status: 0, // 初始状态：待支付
        type: '消费'
      };
      response = await createBalancePay(balancePaymentParams);
    }


    if (response.code === 200) {
      const data = response.data;
      if(response.data == "ORDER_ALREADY_PAID"){
        handlePaymentSuccess();
        return;
      }
      switch (selectedPaymentMethod.value) {
        case 'alipay':
          // 显示支付宝二维码
          showAlipayQrCodeModal(data);
          break;
          
        case 'wechat':
          if(data.payParams.nonceStr == "ORDER_ALREADY_PAID"){
            console.log("ORDER_ALREADY_PAID");
            handlePaymentSuccess();
            return;
          }
          // 调用微信支付
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: data.payParams.timeStamp,
            nonceStr: data.payParams.nonceStr,
            package: data.payParams.package,
            signType: data.payParams.signType,
            paySign: data.payParams.paySign,  
            success: () => {
              // 支付成功后查询支付状态
              queryWxPayStatus(orderNo.value,"消费").then((res:any) => {
                console.log(res)
                if (res.code === 200 && res.data.status === 2) { // 2表示支付成功
                  handlePaymentSuccess();
                } else {
                  handlePaymentFail(new Error('支付状态查询失败'));
                }
              }).catch(err => {
                handlePaymentFail(err);
              });
            },
            fail: (err) => {
              handlePaymentFail(err);
            }
          });
          break;
          
        case 'balance':
          // 余额支付直接处理
          if (data) { // 2表示支付成功
            handlePaymentSuccess();
          } else {
            handlePaymentFail(new Error(response.msg || '余额支付失败'));
          }
          break;
      }
    } else {
      throw new Error(response.msg || '支付请求失败');
    }
  } catch (error: any) {
    console.error('支付失败：', error);
    handlePaymentFail(error);
  } finally {
    isLoading.value = false;
  }
};

// 处理支付成功
const handlePaymentSuccess = () => {
  isLoading.value = false;
  uni.showToast({
    title: '支付成功',
    icon: 'success'
  });
  
  // 跳转到支付成功页面
  setTimeout(() => {
    uni.redirectTo({
      url: `/pages/orders/success?orderNo=${orderNo.value}`
    });
  }, 1500);
};

// 处理支付失败
const handlePaymentFail = (error: any) => {
  uni.showModal({
    title: '支付失败',
    content: error.message || '请稍后重试',
    showCancel: false
  });
};

// 处理订单状态变化
const handleOrderStatusChange = (status: number) => {
  switch (status) {
    case 2: // 支付成功
      handlePaymentSuccess();
      break;
    case 3: // 支付失败
      uni.showModal({
        title: '支付失败',
        content: '请重新尝试支付',
        showCancel: false
      });
      break;
    case 4: // 已取消
      uni.showModal({
        title: '订单已取消',
        content: '您的订单已取消，请重新下单',
        showCancel: false,
        success: () => {
          uni.navigateBack();
        }
      });
      break;
  }
};

// 提交订单（现在改为显示支付方式选择）
const submitOrder = () => {
  if (!orderNo.value) {
    uni.showToast({
      title: '订单信息不完整',
      icon: 'none'
    });
    return;
  }

  showPaymentMethods.value = true;
};

// 获取订单详情
const fetchOrderDetail = async (orderNo: string) => {
  try {
    isLoading.value = true;
    const response = await getByOrderNo(orderNo);
    console.log(response);
    if (response.code === 200) {
      const data = response.data;
      orderDetail.value = data;
      payTotal.value = data.actualAmount;
      
      // 处理订单状态变化
      handleOrderStatusChange(data.status);
      
      // 如果是待支付状态，开始倒计时
      if (data.status === 0) {
        startCountdown();
      }
    }
  } catch (error) {
    console.error('获取订单信息失败:', error);
    uni.showToast({
      title: '获取订单信息失败',
      icon: 'none'
    });
  } finally {
    isLoading.value = false;
  }
};

// 页面加载
onLoad((options: any) => {
  if (options?.orderNo) {
    console.log(options.orderNo);
    orderNo.value = options.orderNo;
    // 获取订单详情
    fetchOrderDetail(options.orderNo);
    // 获取用户余额
    fetchUserBalance(); 
  }
});
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 120px;
}

.order-info {
  background-color: #fff;
  padding: 24px;
  margin-bottom: 12px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.order-countdown {
  font-size: 14px;
  color: #ff4d4f;
}

.order-status {
  padding: 20rpx 0;
  text-align: center;
}

.status-text {
  font-size: 32rpx;
  font-weight: bold;
}

.order-no {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.order-no .label {
  font-size: 14px;
  color: #666;
}

.order-no .value {
  font-size: 14px;
  color: #333;
  margin-left: 8px;
}

.order-coupon {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.order-coupon .label {
  font-size: 14px;
  color: #666;
}

.order-coupon .value {
  font-size: 14px;
  color: #ff4d4f;
  margin-left: 8px;
}

.order-amount-group {
  margin-top: 10px;
  margin-bottom: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.amount-row:last-child {
  margin-bottom: 0;
}

.amount-row .label {
  font-size: 15px;
  color: #333;
}

.amount-row .value {
  font-size: 15px;
  color: #333;
}

.amount-row .amount {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: 600;
}

.item-subtotal {
  font-size: 13px;
  color: #999;
  margin-left: 8px;
}

.order-items {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.item-list {
  margin-top: 12px;
  margin-left: 20px;
}

.item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.item:last-child {
  border-bottom: none;
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 12px;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.item-price {
  font-size: 15px;
  color: #ff4d4f;
  font-weight: 600;
  margin-right: 8px;
}

.item-quantity {
  font-size: 13px;
  color: #999;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 10px;
}

.payment-section {
  background-color: #fff;
  padding: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-method-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.payment-method-item:active {
  background-color: #f0f0f0;
}

.payment-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-icon svg {
  width: 100%;
  height: 100%;
}

.payment-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-name {
  font-size: 16px;
  color: #333;
}

.method-check {
  color: #07c160;
  font-size: 18px;
  font-weight: bold;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 24px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.pay-btn {
  background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
  transition: all 0.3s ease;
}

.pay-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
}

.total-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: 600;
}

.balance-text {
  font-size: 12px;
  color: #666;
}

.qr-code-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.qr-code-content {
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.qr-code-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.qr-code-header .title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.qr-code-header .close {
  font-size: 40rpx;
  color: #999;
  padding: 0 20rpx;
}

.qr-code-body {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-code {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 30rpx;
}

.amount {
  font-size: 40rpx;
  font-weight: 600;
  color: #ff4d4f;
  margin-bottom: 20rpx;
}

.tip {
  font-size: 28rpx;
  color: #666;
}

.qr-code-footer {
  padding: 30rpx;
  border-top: 1px solid #f0f0f0;
}

.check-payment-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
  color: #fff;
  font-size: 32rpx;
  border-radius: 40rpx;
  border: none;
}

.save-qr-btn {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
  border: none;
  margin-top: 20rpx;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.save-qr-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.3);
}
</style> 